<template>
 <h1>登录页面</h1>
</template>

<script setup>
import { ref, onMounted, computed ,onUnmounted} from 'vue';
import { useRouter } from 'vue-router';
import axios from "@/utils/axios.ts";


// 路由实例
const router = useRouter();

// 状态管理
const drafts = ref([]);
const loading = ref(false);
const finished = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const activeTab = ref(0);

// 状态映射 - 1:未发布 2:审核未过
const statusText = {
  1: '未发布',
  2: '审核未过'
};

// 状态样式映射
const statusClass = {
  1: 'status-unpublished',
  2: 'status-rejected'
};

// 初始化加载草稿
onMounted(() => {
  // 从本地存储加载草稿

});

const data = reactive({
  title:'',
  content:'',
  contentType:'',
  draftTime:'',
  status:'',

});

// 根据标签筛选草稿
const filteredDrafts = computed(() => {
  if (activeTab.value === 0) return drafts.value; // 全部
  if (activeTab.value === 1) return drafts.value.filter(d => d.status === 1); // 未发布
  if (activeTab.value === 2) return drafts.value.filter(d => d.status === 2); // 审核未过
  return [];
});

// 加载更多草稿
const onLoad = () => {
  // 模拟异步加载
  setTimeout(() => {
    if (currentPage.value >= 2) {
      finished.value = true;
      loading.value = false;
      return;
    }

    // 模拟加载更多数据
    const moreDrafts = [
      {
        id: `more-${currentPage.value}-1`,
        type: 'text',
        content: `这是第${currentPage.value}页的未发布草稿...`,
        status: 1,
        updateTime: new Date().getTime() - 3600000 * currentPage.value
      },
      {
        id: `more-${currentPage.value}-2`,
        type: 'text-image',
        content: `这是第${currentPage.value}页审核未过的草稿`,
        mediaUrl: `https://picsum.photos/400/300?random=${10 + currentPage.value}`,
        status: 2,
        reason: '内容不符合社区规范，请修改后重新提交',
        updateTime: new Date().getTime() - 7200000 * currentPage.value
      }
    ];

    drafts.value = [...drafts.value, ...moreDrafts];
    localStorage.setItem('drafts', JSON.stringify(drafts.value));
    currentPage.value++;
    loading.value = false;
  }, 1000);
};

// 格式化时间
const formatTime = (timestamp) => {
  const now = new Date();
  data.draftTime = new Date(timestamp);
  const diffMs = now - draftTime;
  const diffHours = Math.floor(diffMs / 3600000);
  const diffDays = Math.floor(diffHours / 24);

  if (diffHours < 1) {
    return '刚刚';
  } else if (diffHours < 24) {
    return `${diffHours}小时前`;
  } else if (diffDays < 7) {
    return `${diffDays}天前`;
  } else {
    return `${data.draftTime.getMonth() + 1}月${data.draftTime.getDate()}日`;
  }
};

// 处理上传
const handleUpload = (id) => {
  data.status=1

};
// 删除草稿
const handleDelete = (id) => {
  Dialog.showConfirmDialog({
    title: '删除草稿',
    message: '确定要删除此草稿吗？删除后不可恢复',
  })
      .then(() => {
        // 确认删除逻辑（保持不变）
        drafts.value = drafts.value.filter(draft => draft.id !== id);
        localStorage.setItem('drafts', JSON.stringify(drafts.value));
        showToast('删除成功');
      })
      .catch(() => {
        // 取消删除（无需操作）
      });
};// 返回上一页
const handleBack = () => {
  router.back();
};

// 重新编辑
const edit = (draftId) => {

};
</script>

<style scoped>
/* 状态标签样式 */
.draft-page-root {
  min-height: 100vh;
  background-color: #fff; /* 背景改为白色，贴合目标样式 */
  padding-bottom: 80px;
}

/* 标签栏 */
.status-tabs {
  margin: 0; /* 取消底部外边距，让标签栏更紧凑 */
  background-color: #fff;
  border-bottom: 1px solid #eee; /* 增加底部分割线 */
}

/* 状态标签 */
.status-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
  color: #fff;
  margin-bottom: 4px;
}

.status-unpublished {
  background-color: #4e9afe;
}

.status-rejected {
  background-color: #ff7d00;
}

/* 无草稿状态 */
.empty-draft {
  padding: 30px 15px;
  text-align: center;
}

.create-btn {
  margin-top: 15px;
  background-color: #fe2c55;
  border-color: #fe2c55;
  font-size: 14px;
}

.btn-icon {
  margin-right: 5px;
}

/* 草稿列表容器 */
.draft-group {
  margin: 0;
}

/* 草稿项 */
.draft-item {
  padding: 10px 15px;
  border-bottom: 1px solid #f5f5f5;
}

.draft-item:last-child {
  border-bottom: none;
}

.draft-content {
  width: 100%;
}

.draft-text {
  margin: 0;
  color: #333;
  font-size: 14px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}

/* 媒体预览（如果有需要再微调，目前示例无媒体） */
.draft-media {
  position: relative;
  width: 80px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 6px;
}

.media-preview {
  width: 100%;
  height: 100%;
}

.media-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 20px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.video-icon {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  padding: 3px;
}

/* 草稿信息栏 */
.draft-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #999;
}

.draft-actions {
  display: flex;
  gap: 4px;
}
</style>
